<template>
	<view class="box bgf">
		<view class="title f30 c3 bold t-flex between">
			<view class="left">
				<text>{{status.year}}</text> <text class="ml20">{{status.month}}月</text>
			</view>
			<view class="right t-flex center">
				<text class="pre iconfont icon-xiangyou1 reverse" @click="pre"></text>
				<view class="cr ml20 mr20" @click="status.year = status.now;status.month = status.nowmonth"></view>
				<text class="next iconfont icon-xiangyou1" @click="next"></text>
			</view>
		</view>
		<view class="content pl10 pr10">
			<view class="li t-flex between" v-for="item,index in 3" :key="item">
				<text v-for="item2 in 4" :key="item2"
				class="item bold"
				:class="{'active':status.month == item2+(index*4)}"
				@click="status.month = item2+(index*4)"
				>
				{{item2+(index*4)}}月
				<text class="dot"></text>
				</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { computed, watch,reactive } from 'vue';
	
	
	const emit = defineEmits(['update:modelValue'])
	
	let status = reactive({
		year:2024,
		month:1,
		now:2024,
		nowmonth:1,
	})
	watch(status,()=>{
		changeDate()
	})
	
	status.year = new Date().getFullYear()
	status.now = new Date().getFullYear()
	status.month = new Date().getMonth()+1
	status.nowmonth = new Date().getMonth()+1
	
	let props = defineProps({
		modelValue:{
			type:String,
			default:''
		}
	})
	
	
	const model = computed({
		get(){
			return props.modelValue
		},
		set(val){
			emit('update:modelValue',val)
		}
	})
	
	
	
	const pre = ()=>{
		if(status.year>1) status.year --
	}
	const next = ()=>{
		if(status.year<status.now) status.year++
	}
	
	
	const changeDate = ()=>{
		model.value = `${status.year}-${(status.month+'').padStart(2,'0')}`
	}
	
	
</script>

<style scoped lang="scss">
	.box{
		width: 570rpx;
		border-radius: 16rpx;
		box-shadow: 0rpx 14rpx 22rpx 0rpx rgba(183,183,183,0.5), 0rpx -6rpx 8rpx 0rpx rgba(197,197,197,0.19);
		padding: 0 30rpx;
		.title{
			padding: 30rpx 0;
			border-bottom: 2rpx solid #eee;
			.cr{
				width: 20rpx;
				height: 20rpx;
				border: 2rpx solid #999999;
				border-radius: 50%;
			}
		}
		.content{
			padding-bottom: 40rpx;
			.li{
				margin-top: 40rpx;
				.item{
					position: relative;
					color: #666;
					.dot{
						width: 10rpx;
						height: 10rpx;
						background-color: $main-color;
						border-radius: 50%;
						position: absolute;
						bottom: -12rpx;
						left: 0;
						right: 0;
						margin: auto;
						opacity: 0;
					}
				}
				.item.active{
					color: $main-color;
					.dot{
						opacity: 1;
					}
				}
			}
		}
	}

</style>